<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login_title</title>
        <style>
                * {
                        margin: 0;
                        padding: 0;
                }

                body {
                        transition: all 2s;
                        opacity: 0;
                        text-decoration: none;
                        list-style: none;
                        overflow: hidden;
                        width: 100vw;
                        height: 100vh;
                }

                :root {
                        --all-color: skyblue;
                        --font-family: "楷体";
                        --login-background-first: white;
                        --login-background-second: skyblue;
                }

                input {
                        outline: none;
                }

                .Container {
                        border: 0px solid blue;
                        width: 100vw;
                        height: 100vh;
                        background: linear-gradient(to bottom, var(--login-background-first), var(--login-background-second));
                        display: flex;
                        justify-content: center;
                        justify-items: center;
                        align-items: center;
                        align-content: center;
                        flex-direction: column;
                }

                #Title {
                        text-align: center;
                        font-size: 35px;
                        color: skyblue;
                }

                .User_input {
                        display: flex;
                        justify-content: center;
                        justify-items: center;
                        align-items: center;
                        align-content: center;
                        margin-top: 30px;
                }

                .User_input_item {
                        width: 300px;
                        display: flex;
                        justify-content: center;
                        justify-items: center;
                        align-items: center;
                        align-content: center;
                        flex-direction: column;

                }

                .User_input_item p {
                        font-size: 18px;
                        color: rgb(87, 205, 252);
                }

                .User_input_item input {
                        margin-top: 15px;
                        width: 90%;
                        height: 30px;
                        border-radius: 5px;
                        border: 1px solid var(--all-color);
                        padding-left: 10px;
                }

                .User_input_item input:focus {
                        transition: all 0.8s;
                        background-color: var(--all-color);
                        color: white;
                        box-shadow: 0px 0px 10px 0px var(--all-color);
                }

                .Login {
                        border: none;
                        outline: none;
                        width: 65px;
                        height: 40px;
                        margin-top: 50px;
                        border-radius: 10px;
                        color: white;
                        background-color: var(--all-color);
                }

                .Login:hover {
                        transition: all 0.6s;
                        background-color: #86f1ff;

                }

                .Message {
                        position: absolute;
                        transition: all 1.5s;
                        z-index: 100;
                        right: 0;
                        top: -500px;
                        border-radius: 5px;
                        left: 10px;
                        margin: auto;
                        width: 230px;
                        height: 60px;
                        display: flex;
                        justify-content: center;
                        justify-items: center;
                        align-items: center;
                        align-content: center;
                        color: white;
                        font-family: var(--font-family);
                        font-size: 18px;
                }
        </style>
</head>

<body onload="BodyLoad()" id="body">
        <div class="Message" id="Message">
                <p id="MessageContent">请求成功</p>
        </div>
        <div class="Container">
                <div class="Title"><b>
                                <p id="Title"></p>
                        </b></div>
                <div class="User_input">
                        <div class="User_input_item">
                                <p>账号</p>
                                <input type="text" placeholder="请输入账号" id="user">
                        </div>
                </div>
                <div class="User_input">
                        <div class="User_input_item">
                                <p>密码</p>
                                <input type="text" placeholder="请输入密码" id="password">
                        </div>
                </div>
                <button class="Login" onclick="Login()">登录</button>
        </div>
</body>

</html>
<script>
        var Message = document.getElementById("Message")
        var MessageContent = document.getElementById("MessageContent")
        var user = document.getElementById("user")
        var password = document.getElementById("password")
        var body = document.getElementById("body")
        function BodyLoad() {
                body.style.opacity = "1"
        }
        //标题写入
        var title = document.getElementById("Title")
        title.innerHTML = "Login_title"
        //登录
        function Login() {
                if (user.value == "" || user.value == null) {
                        Error("账号不能为空！")
                }
                else if (password.value == "" || password.value == null) {
                        Error("密码不能为空！")
                } else {
                        Success("登录成功！")
                }
        }

        function Error(content) {
                Message.style.top = "0px"
                Message.style.backgroundColor = "red"
                MessageContent.innerHTML = content
                setTimeout(() => {
                        Message.style.top = "-500px"
                }, 3000)
        }
        function Success(content) {
                Message.style.top = "0px"
                Message.style.backgroundColor = "green"
                MessageContent.innerHTML = content
                setTimeout(() => {
                        Message.style.top = "-500px"
                }, 3000)
        }
</script>